<template>
<div class="box">
    <img id="one" draggable="true" src="http://www.w3school.com.cn/i/ct_html5_canvas_circle.gif" alt="">
    <img id="two" draggable="true" src="../img/2.png" alt="">
  
	 <canvas style="border: 1px solid #000" id="myCanvas" width="500" height="400">
         <p>您的系统不支持此程序!</p>
     </canvas>
</div>
</template>
<script>
	let img1 = new Image();
let canva;
let cansText;
let box;
let drop;

   
	
	  
	

export default {
  name: "clone",
  display: "Clone",
  order: 2,
  mounted() {
    this.initCanvas()
    
  },
  components: {
   
  },
  data() {
    return {
      
    };
  },

  methods: {
   initCanvas() {
      console.log("初始化canvas")
      canva=document.getElementById("myCanvas");
      cansText= canva.getContext('2d');
      box = document.getElementsByClassName('box')[0];
      drop = document.getElementById('myCanvas');
      box.ondragstart=this.dragstart;
	  drop.ondragenter=this.dragenter;
	  box.ondrag = this.drag;
	  box.ondragend= this.dragend;
	  drop.ondragover= this.dragover;
	  drop.ondragleave= this.dragleave;
	  drop.ondrop= this.drop;
	   
    },
	 
    dragstart(e) {
        console.log('dragstart');
        e.dataTransfer.setData('id',e.target.id);
		var dragobj = document.getElementById(e.target.id);
		//dragobj.draggable = false;
		// e.preventDefault();
		e.dataTransfer.setData('offsetx',e.x-this.getLeft(dragobj));
		e.dataTransfer.setData('offsety',e.y-this.getTop(dragobj));
	
    }, 
     drag(e) {
        console.log('drag',e.target.id);
    },
     dragend(e) {
        console.log('dragend'+e)
    },
     dragenter (e) {
        console.log('dragenter');
        e.preventDefault();
    },
     dragover(e) {
        console.log('dragover');
        e.preventDefault();
        drop.innerHTML = '';
    },
     dragleave(e) {
        console.log('dragleave');
        e.preventDefault();
    },
     drop(e) {
        console.log('drop');
        var imgId = e.dataTransfer.getData('id');
		var offsetX = e.dataTransfer.getData('offsetx');
		var offsetY = e.dataTransfer.getData('offsety');

		debugger;
		img1.src=document.getElementById(imgId).src;
		
		//var x = e.clientX - canva.offsetLeft;
		//var y = e.clientY - canva.offsetTop;
		var x = e.clientX - offsetX ;
		var y = e.clientY - offsetY;

		var getBoundingClientRectTop = canva.getBoundingClientRect().top;
		var getBoundingClientRectLeft = canva.getBoundingClientRect().left;
		
		var realy = y - getBoundingClientRectTop;
		var realx = x - getBoundingClientRectLeft;
		console.log('x='+realx+',y='+realy);
		cansText.drawImage(img1,realx,realy,document.getElementById(imgId).width,document.getElementById(imgId).height);
        e.preventDefault();
		e.stopPropagation();
	},
   getTop(e) {
		var offset = e.offsetTop;

		if (e.offsetParent != null) offset += this.getTop(e.offsetParent);

		return offset;
  },
 getLeft(e) {
	if(e!=null){
	 var offset = e.offsetLeft;

	 if (e.offsetParent != null) offset += this.getLeft(e.offsetParent);

	 return offset;
	}
  }
}
}
</script>
<style>
    .demo * {
        float: left;
        width: 100px;
        height: 100px;
        border: 1px solid #000;
    }
    img {
        width: 100px;
        height: 100px;
        display: inline-block;
    }
    .drop {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
    }
</style>